<template>
  <div class="home-container">
    <P class="page-title">{{username}}</P>
    <div class="album-container">
        <div class="album-item" v-for="(album,index) in albumList" :key="index" @click="seePhotos(album.album_name,album.id)">
            <img class="album-face" v-lazy="album.album_face" alt="">
            <p class="album-name">{{album.album_name}}</p>
            <!-- {{album.id}} -->
        </div>
        <div class="plac-album" v-for="(album,index) in albumList">

        </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'Home',
  data () {
    return {
      username: '',
      albumList: []
    }
  },
  created(){
      this.username = localStorage.getItem("username");
      this.getAlbumList()
  },
  methods:{
      getAlbumList(){
          const uid = localStorage.getItem("uid")
          this.hp.get(`api/user/${uid}/album`).then((data) => {
              this.albumList = data
          }).catch(error => console.log(error))
        // this.albumList = [
        //     {
        //         "id": 1,
        //         "u_id": 2,
        //         "type_id": 1,
        //         "album_name": "小日子过得好呢",
        //         "album_describe": "所有的人和事，自己问心无愧就好，不是你的也别强求，反正离去的，都是风景，留下的，才是人生。",
        //         "album_face":"./static/image/3.JPG",
        //         "album_click": 0,
        //         "allcomment_num": 0,
        //         "create_time": "2017-11-03 13:11:20"
        //     },
        //     {
        //         "id": 3,
        //         "u_id": 2,
        //         "type_id": 2,
        //         "album_name": "理想天堂",
        //         "album_describe": "旅行是一场华丽的梦境，唯有生活才是生命的本质。走得越远，去的地方越多，越清楚自己要什么生活。",
        //         "album_face":"./static/image/2.JPG",
        //         "album_click": 0,
        //         "allcomment_num": 0,
        //         "create_time": "2017-11-03 21:31:17"
        //     },
        //     {
        //         "id": 4,
        //         "u_id": 2,
        //         "type_id": 2,
        //         "album_name": "理想天堂",
        //         "album_describe": "旅行是一场华丽的梦境，唯有生活才是生命的本质。走得越远，去的地方越多，越清楚自己要什么生活。",
        //         "album_face":"./static/image/3.JPG",
        //         "album_click": 0,
        //         "allcomment_num": 0,
        //         "create_time": "2017-11-03 21:31:17"
        //     }
        // ]
      },
      seePhotos(albumName,albumId){
        localStorage.setItem("album_name",albumName);
        localStorage.setItem("album_id",albumId);
          this.$router.push({
              name:"Photo",
              path:"/photo",
              params:{
                  albumId:albumId,
                  albumName:albumName
              }
          })
      }
  }
}
</script>

<style scoped>
.album-face[lazy=loading] {
  width: 100%;
  height: 160px;
  margin: auto;
}
.album-face[lazy=error] {
  width: 100%;
  height: 160px;
  margin: auto;
}

.home-container{
    height:100%;
    flex:1;
}
.page-title{
    background-color: #4ae087;
    margin: 0;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.4rem;
    color: #f1f1f1;
}
.album-container{
    display: flex;
    margin: .5rem .5rem;
    flex-wrap: wrap
}
.album-item{
    flex-basis: 11rem;
    flex-grow: 200;
    /* height: 14rem; */
    border: 1px solid #ddd;
    margin: .5rem .5rem
}
.plac-album{
    flex-basis: 11rem;
    flex-grow: 200;
    height: 0;
    margin: .5rem .5rem
}
.album-face{
    width: 100%;
}
.album-name{
    margin: .4rem 0 .7rem
}
</style>
